<template>
  <div class="butt-list-sty">
    <div v-for="(item,index) in buttonselectlist" :key="index" :class="index === selectedindex ? 'basebut1':'basebut2'" @click="selbut(index, item)">
      {{ item.virtualSystemName }}
    </div>
  </div>
</template>
<script>
import api from "@/api/user/index.js"

export default {
  props: {
    // buttonselectlist: {
    //   type: Array,
    //   default: () => [
    //     // { name: "总产量" },
    //     // { name: "亩均产量" }
    //   ]
    // }
  },
  data() {
    return {
      selectedindex: 0,
      buttonselectlist: []
    }
  },
  created() {
  },
  mounted() {
    this.getlist()
  },
  methods: {

    selbut(i, x) {
      this.selectedindex = i
      console.log(x)
      this.$emit('nowselectbutton', x)
    },
    async getlist() {
      let data = await api.queryVirtualSystem(sessionStorage.organizationNo)
      this.buttonselectlist = data.data
      // console.log(data)
      this.selbut(0, this.buttonselectlist[0])
    }
  }
}
</script>
<style lang="scss" scoped>
.butt-list-sty{
    width: 100%;
    // height: 30px;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    overflow-y: hidden;
    &::-webkit-scrollbar-thumb {
        width: 6px;
        background: #aaa;
    }
}
.basebut1 {
    width: 130px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    // background-color: transparent;
    background-image: linear-gradient(#0fa1d2,#1087af,#106f8f);
    border: #f6f9f9 1px solid;
    border-radius: 15px;
    color: #ffffff;
    cursor: pointer;
    margin: 3px 5px;
    padding: 0 5px 0 5px;
    white-space: nowrap;
}
.basebut2 {
    width: 130px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #106986;
    border-radius: 15px;
    color: #ffffff;
    cursor: pointer;
    margin: 3px 5px;
    padding: 0 5px 0 5px;
    white-space: nowrap;
}
</style>
